<template>
  <div class="app-container">
    <!-- 统计卡片 -->
    <el-row :gutter="20" class="statistics-cards">
      <el-col :span="6">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon success">
              <el-icon size="40"><TrendCharts /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ statistics.totalActivities }}</div>
              <div class="stat-label">总活动数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon primary">
              <el-icon size="40"><Promotion /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ statistics.activeActivities }}</div>
              <div class="stat-label">进行中活动</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon warning">
              <el-icon size="40"><ShoppingCart /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ statistics.totalOrders }}</div>
              <div class="stat-label">总订单数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon danger">
              <el-icon size="40"><Money /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">¥{{ statistics.totalRevenue }}</div>
              <div class="stat-label">总收入</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" class="chart-section">
      <el-col :span="12">
        <el-card class="chart-card" shadow="never">
          <template #header>
            <div class="card-header">
              <span>活动趋势</span>
              <el-select v-model="trendTimeRange" size="small" style="width: 120px;">
                <el-option label="最近7天" value="7" />
                <el-option label="最近30天" value="30" />
                <el-option label="最近90天" value="90" />
              </el-select>
            </div>
          </template>
          <div class="chart-container">
            <div ref="trendChart" style="width: 100%; height: 300px;"></div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="12">
        <el-card class="chart-card" shadow="never">
          <template #header>
            <div class="card-header">
              <span>活动状态分布</span>
            </div>
          </template>
          <div class="chart-container">
            <div ref="statusChart" style="width: 100%; height: 300px;"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 热门活动 -->
    <el-row :gutter="20" class="chart-section">
      <el-col :span="12">
        <el-card class="chart-card" shadow="never">
          <template #header>
            <div class="card-header">
              <span>热门活动排行</span>
            </div>
          </template>
          <div class="ranking-list">
            <div 
              v-for="(activity, index) in hotActivities" 
              :key="activity.id" 
              class="ranking-item"
            >
              <div class="ranking-number" :class="getRankingClass(index)">
                {{ index + 1 }}
              </div>
              <div class="ranking-content">
                <div class="ranking-title">{{ activity.title }}</div>
                <div class="ranking-info">
                  <span>订单数：{{ activity.orderCount }}</span>
                  <span>收入：¥{{ activity.revenue }}</span>
                </div>
              </div>
              <div class="ranking-status">
                <el-tag :type="getStatusType(activity.status)" size="small">
                  {{ getStatusText(activity.status) }}
                </el-tag>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="12">
        <el-card class="chart-card" shadow="never">
          <template #header>
            <div class="card-header">
              <span>商品销售排行</span>
            </div>
          </template>
          <div class="ranking-list">
            <div 
              v-for="(product, index) in hotProducts" 
              :key="product.id" 
              class="ranking-item"
            >
              <div class="ranking-number" :class="getRankingClass(index)">
                {{ index + 1 }}
              </div>
              <div class="ranking-content">
                <div class="ranking-title">{{ product.productName }}</div>
                <div class="ranking-info">
                  <span>销量：{{ product.salesCount }}</span>
                  <span>库存：{{ product.currentStock }}/{{ product.totalStock }}</span>
                </div>
              </div>
              <div class="ranking-price">
                ¥{{ product.activityPrice }}
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 实时数据 -->
    <el-card class="realtime-card" shadow="never">
      <template #header>
        <div class="card-header">
          <span>实时数据</span>
          <el-button type="primary" size="small" @click="refreshRealtimeData">
            刷新数据
          </el-button>
        </div>
      </template>
      
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="realtime-item">
            <div class="realtime-label">今日新增活动</div>
            <div class="realtime-value">{{ realtimeData.todayNewActivities }}</div>
            <div class="realtime-change" :class="getChangeClass(realtimeData.todayNewActivitiesChange)">
              {{ realtimeData.todayNewActivitiesChange > 0 ? '+' : '' }}{{ realtimeData.todayNewActivitiesChange }}%
            </div>
          </div>
        </el-col>
        
        <el-col :span="8">
          <div class="realtime-item">
            <div class="realtime-label">今日订单数</div>
            <div class="realtime-value">{{ realtimeData.todayOrders }}</div>
            <div class="realtime-change" :class="getChangeClass(realtimeData.todayOrdersChange)">
              {{ realtimeData.todayOrdersChange > 0 ? '+' : '' }}{{ realtimeData.todayOrdersChange }}%
            </div>
          </div>
        </el-col>
        
        <el-col :span="8">
          <div class="realtime-item">
            <div class="realtime-label">今日收入</div>
            <div class="realtime-value">¥{{ realtimeData.todayRevenue }}</div>
            <div class="realtime-change" :class="getChangeClass(realtimeData.todayRevenueChange)">
              {{ realtimeData.todayRevenueChange > 0 ? '+' : '' }}{{ realtimeData.todayRevenueChange }}%
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup name="ActivityStatistics">
import * as echarts from 'echarts'

const { proxy } = getCurrentInstance()

// 统计数据
const statistics = ref({
  totalActivities: 0,
  activeActivities: 0,
  totalOrders: 0,
  totalRevenue: 0
})

// 图表相关
const trendChart = ref(null)
const statusChart = ref(null)
const trendTimeRange = ref('7')
let trendChartInstance = null
let statusChartInstance = null

// 热门数据
const hotActivities = ref([])
const hotProducts = ref([])

// 实时数据
const realtimeData = ref({
  todayNewActivities: 0,
  todayNewActivitiesChange: 0,
  todayOrders: 0,
  todayOrdersChange: 0,
  todayRevenue: 0,
  todayRevenueChange: 0
})

/** 获取统计数据 */
function getStatistics() {
  // 模拟数据
  statistics.value = {
    totalActivities: 156,
    activeActivities: 23,
    totalOrders: 2847,
    totalRevenue: 125680.50
  }
}

/** 初始化趋势图表 */
function initTrendChart() {
  if (trendChartInstance) {
    trendChartInstance.dispose()
  }
  
  trendChartInstance = echarts.init(trendChart.value)
  
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['活动数', '订单数', '收入']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: [
      {
        type: 'value',
        name: '数量'
      },
      {
        type: 'value',
        name: '收入',
        axisLabel: {
          formatter: '¥{value}'
        }
      }
    ],
    series: [
      {
        name: '活动数',
        type: 'line',
        data: [12, 15, 18, 14, 16, 20, 23]
      },
      {
        name: '订单数',
        type: 'line',
        data: [120, 150, 180, 140, 160, 200, 230]
      },
      {
        name: '收入',
        type: 'line',
        yAxisIndex: 1,
        data: [1200, 1500, 1800, 1400, 1600, 2000, 2300]
      }
    ]
  }
  
  trendChartInstance.setOption(option)
}

/** 初始化状态分布图表 */
function initStatusChart() {
  if (statusChartInstance) {
    statusChartInstance.dispose()
  }
  
  statusChartInstance = echarts.init(statusChart.value)
  
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '活动状态',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '18',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 45, name: '已发布' },
          { value: 23, name: '进行中' },
          { value: 18, name: '已结束' },
          { value: 12, name: '已暂停' },
          { value: 8, name: '草稿' }
        ]
      }
    ]
  }
  
  statusChartInstance.setOption(option)
}

/** 获取热门活动 */
function getHotActivities() {
  // 模拟数据
  hotActivities.value = [
    {
      id: 1,
      title: '限时抢购活动',
      orderCount: 156,
      revenue: 15600,
      status: '2'
    },
    {
      id: 2,
      title: '新年特惠活动',
      orderCount: 142,
      revenue: 14200,
      status: '2'
    },
    {
      id: 3,
      title: '双十一大促',
      orderCount: 128,
      revenue: 12800,
      status: '3'
    },
    {
      id: 4,
      title: '春节特惠',
      orderCount: 98,
      revenue: 9800,
      status: '2'
    },
    {
      id: 5,
      title: '夏季清仓',
      orderCount: 76,
      revenue: 7600,
      status: '3'
    }
  ]
}

/** 获取热门商品 */
function getHotProducts() {
  // 模拟数据
  hotProducts.value = [
    {
      id: 1,
      productName: 'iPhone 15 Pro',
      salesCount: 89,
      currentStock: 11,
      totalStock: 100,
      activityPrice: 7999
    },
    {
      id: 2,
      productName: 'MacBook Air',
      salesCount: 67,
      currentStock: 33,
      totalStock: 100,
      activityPrice: 8999
    },
    {
      id: 3,
      productName: 'AirPods Pro',
      salesCount: 156,
      currentStock: 44,
      totalStock: 200,
      activityPrice: 1899
    },
    {
      id: 4,
      productName: 'iPad Air',
      salesCount: 45,
      currentStock: 55,
      totalStock: 100,
      activityPrice: 4599
    },
    {
      id: 5,
      productName: 'Apple Watch',
      salesCount: 78,
      currentStock: 22,
      totalStock: 100,
      activityPrice: 2999
    }
  ]
}

/** 获取实时数据 */
function getRealtimeData() {
  // 模拟数据
  realtimeData.value = {
    todayNewActivities: 5,
    todayNewActivitiesChange: 12.5,
    todayOrders: 234,
    todayOrdersChange: 8.3,
    todayRevenue: 15680.50,
    todayRevenueChange: 15.2
  }
}

/** 刷新实时数据 */
function refreshRealtimeData() {
  getRealtimeData()
  proxy.$modal.msgSuccess('数据已刷新')
}

/** 获取排行样式 */
function getRankingClass(index) {
  const classes = ['gold', 'silver', 'bronze']
  return index < 3 ? classes[index] : ''
}

/** 获取状态类型 */
function getStatusType(status) {
  const statusMap = {
    '0': 'info',
    '1': 'warning',
    '2': 'success',
    '3': 'danger',
    '4': 'info'
  }
  return statusMap[status] || 'info'
}

/** 获取状态文本 */
function getStatusText(status) {
  const statusMap = {
    '0': '草稿',
    '1': '待发布',
    '2': '已发布',
    '3': '已结束',
    '4': '已暂停'
  }
  return statusMap[status] || '未知'
}

/** 获取变化样式 */
function getChangeClass(change) {
  return change > 0 ? 'positive' : change < 0 ? 'negative' : 'neutral'
}

// 监听时间范围变化
watch(trendTimeRange, () => {
  initTrendChart()
})

// 页面加载时初始化
onMounted(() => {
  getStatistics()
  getHotActivities()
  getHotProducts()
  getRealtimeData()
  
  nextTick(() => {
    initTrendChart()
    initStatusChart()
  })
})

// 组件卸载时清理图表
onUnmounted(() => {
  if (trendChartInstance) {
    trendChartInstance.dispose()
  }
  if (statusChartInstance) {
    statusChartInstance.dispose()
  }
})
</script>

<style scoped>
.statistics-cards {
  margin-bottom: 20px;
}

.stat-card {
  height: 120px;
}

.stat-content {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
}

.stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  color: white;
}

.stat-icon.success {
  background: linear-gradient(135deg, #67c23a, #85ce61);
}

.stat-icon.primary {
  background: linear-gradient(135deg, #409eff, #66b1ff);
}

.stat-icon.warning {
  background: linear-gradient(135deg, #e6a23c, #ebb563);
}

.stat-icon.danger {
  background: linear-gradient(135deg, #f56c6c, #f78989);
}

.stat-info {
  flex: 1;
}

.stat-number {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #909399;
}

.chart-section {
  margin-bottom: 20px;
}

.chart-card {
  height: 400px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-container {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ranking-list {
  height: 300px;
  overflow-y: auto;
}

.ranking-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.ranking-item:last-child {
  border-bottom: none;
}

.ranking-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-weight: bold;
  color: white;
  background: #909399;
}

.ranking-number.gold {
  background: linear-gradient(135deg, #ffd700, #ffed4e);
  color: #303133;
}

.ranking-number.silver {
  background: linear-gradient(135deg, #c0c0c0, #e0e0e0);
  color: #303133;
}

.ranking-number.bronze {
  background: linear-gradient(135deg, #cd7f32, #daa520);
  color: white;
}

.ranking-content {
  flex: 1;
}

.ranking-title {
  font-weight: 500;
  color: #303133;
  margin-bottom: 4px;
}

.ranking-info {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: #909399;
}

.ranking-status {
  flex-shrink: 0;
}

.ranking-price {
  font-weight: bold;
  color: #f56c6c;
  font-size: 16px;
}

.realtime-card {
  margin-bottom: 20px;
}

.realtime-item {
  text-align: center;
  padding: 20px;
}

.realtime-label {
  font-size: 14px;
  color: #606266;
  margin-bottom: 8px;
}

.realtime-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 4px;
}

.realtime-change {
  font-size: 12px;
  font-weight: 500;
}

.realtime-change.positive {
  color: #67c23a;
}

.realtime-change.negative {
  color: #f56c6c;
}

.realtime-change.neutral {
  color: #909399;
}
</style> 